<!-- PersonalInfoCard.vue -->
<template>
  <div class="info-card personal-info-card">
    <h3>个人信息</h3>
    <div class="info-list">
      <div class="info-item">
        <span class="info-label">姓名</span>
        <span class="info-value">{{ userInfo.name }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">身份</span>
        <span class="info-value">{{ userInfo.role === 'student' ? '学生' : '教师' }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">邮箱</span>
        <span class="info-value">{{ userInfo.email }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PersonalInfoCard',
  props: {
    userInfo: {
      type: Object,
      required: true,
      default: () => ({
        name: '',
        role: '',
        email: ''
      })
    }
  }
}
</script>

<style scoped>
.info-card {
  background: white;
  border-radius: 8px;
  padding: 16px 20px; /* 减小上下内边距 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px; /* 添加底部外边距 */
}

.info-card h3 {
  margin: 0 0 12px 0; /* 减小标题底部边距 */
  color: #303133;
  font-size: 16px; /* 稍微减小标题字体 */
  border-bottom: 2px solid #409EFF;
  padding-bottom: 8px; /* 减小标题下边距 */
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 设置每个信息项之间的间距 */
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0; /* 减小每项的上下内边距 */
  font-size: 14px; /* 统一字体大小 */
  border-bottom: 1px dashed #EBEEF5;
}

.info-label {
  color: #909399;
}

.info-value {
  color: #303133;
  font-weight: 500;
}
</style>